<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
		<navbar title="结业点评"></navbar>
		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}" v-if="dataList.length>0">
			<!-- <view class="toggle">
				<view class="toggle-item" @click="sortChange">
					<view class="toggle-label">
						筛选
					</view>
					<view class="toggle-icon" :class="sortType">
						
					</view>
				</view>
				
			</view> -->
			<view class="item-box" >
				<view class="item" v-for="item in dataList" @click="toDetail(item)">
					<view class="item-line">
						<view class="item-picdir">
							<image :src="baseImage + item.picdir" mode="" v-if="item.picdir"></image>
							<image :src="baseImage + usual.companyLogo" mode="" v-else></image>
						</view>
						<view class="item-line-end">
							<view class="item-name">
								{{item.title}}
							</view>
							<view class="item-status" :class="{'apply':item.isOk==0}">
								{{item.isOk==0? '申请中':'已点评'}}
							</view>
						</view>

					</view>
					<view class="item-brief">
						任职岗位：{{item.gangwei}}
					</view>
					<view class="item-brief">
						任职时间：{{item.startTime && item.endTime? `${item.startTime? item.startTime.split(" ")[0] : ""}至${item.endTime? item.endTime.split(" ")[0]:""}`:""}}
					</view>
					<view class="item-bottom" v-if="item.isOk==1">
						<text >专业技能：{{item.major}}星</text>
						<text>工作态度：{{item.attitude}}星</text>
						<text >工作成绩：{{item.score}}星</text>
					</view>
				</view>
			</view>
		</view>
		<empty v-else></empty>
		<view class="main-button" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}">
			<view class="main-button-remark" @click="addHandler">
				申请结业点评
			</view>
		</view>
		<view class="main-bj">

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import { remarkList } from "@/core/web-api/qiuzhiduan.js"
	import Empty from "@/components/Empty.vue"
	export default {
		components: {
			Navbar,Empty
		},
		data() {
			return {
				sortType: "",
				active: 1,
				dataList: [],
				bottomBtnHeight: uni.upx2px(90),
				page: {
					current: 1,
					limit: 10
				},
			}
		},
		methods: {
			/**
			 * 申请结业点评
			 */
			addHandler(){
				uni.navigateTo({
					url:"/pages/ucenter/qiuzhiduan/remark/apply"
				})
			},
			/**
			 * 排序
			 */
			sortChange() {
				if (this.sortType == 'asc') {
					this.sortType = "desc"
				} else if (this.sortType == "desc") {
					this.sortType = "";
				} else if (this.sortType == "") {
					this.sortType = "asc"
				}
			},
			/**
			 * 跳转详情
			 * @param {Object} item
			 */
			toDetail(item) {
				if(item.isOk==1){					
					uni.navigateTo({
						url: "/pages/ucenter/qiuzhiduan/remark/overList?id=" + item.id
					})
				}else{
					
					uni.navigateTo({
						url: "/pages/ucenter/qiuzhiduan/remark/detail?id=" + item.id
					})
				}
			},

			/**
			 * 加载数据
			 */
			getDataList() {
				remarkList({
					...this.page,
				}).then(res => {
					if (res.code == 20000) {
						let { total, list } = res.data;
						if (this.page.current == 1) {
							this.dataList = list;
						} else {
							this.dataList.push(...list)
						}
						this.total = total
					}
				})
			},
			/**
			 * 分页
			 */
			pageDataList() {
				if (this.total == this.dataList.length) return;
				this.page.current++;
			}

		},
		watch: {
			page: {
				deep: true,
				handler() {
					this.getDataList();
				}
			}
		},
		onReachBottom() {
			this.pageDataList();
		},
		onShow() {
			this.getDataList();
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['baseImage','imgUrl','usual'])
		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 30upx;
			display: flex;
			&-remark {
				width: 100%;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				box-sizing: border-box;
			}
		}

	}

	.toggle {
		margin-top: 30upx;
		display: flex;
		justify-content: flex-end;

		&-label {
			font-size: 26upx;
			color: #4d4d4d;
		}

		&-item {
			display: flex;
		}

		&-icon {
			width: 20upx;
			position: relative;
			margin-left: 10upx;

			&.asc {
				&:before {
					border-bottom-color: #708aff;
				}
			}

			&.desc {
				&:after {
					border-top-color: #708aff;
				}
			}

			&:before {
				content: '';
				display: block;
				border-left: 10upx solid transparent;
				border-right: 10upx solid transparent;
				border-bottom: 11upx solid #868686;
				position: absolute;
				top: 5upx;
				left: 0;
			}

			&:after {
				content: '';
				display: block;
				border-left: 10upx solid transparent;
				border-right: 10upx solid transparent;
				border-top: 11upx solid #868686;
				position: absolute;
				bottom: 5upx;
				left: 0;

			}
		}
	}

	.item {
		&-box {
			width: 100%;
			margin-top: 36upx;
			position: static;
			z-index: 2;
		}

		margin-bottom: 40upx;
		width: 100%;
		border-radius: 8upx;
		background-color: #fff;
		padding:30upx;
		box-sizing: border-box;

		&-line {
			display: flex;
			align-items: center;
			margin-bottom: 10upx;

			&-end {
				display: flex;
				align-items: flex-end;
				flex: 1;
			}
		}

		&-picdir {
			width: 69upx;
			height: 69upx;
			border-radius: 50%;
			margin-top: -15upx;
			margin-left: -15upx;
			margin-right: 10upx;

			image {
				width: 69upx;
				height: 69upx;
				border-radius: 50%;
			}
		}

		&-name {
			font-size: 32upx;
			color: #4d4d4d;
			flex: 1;
			padding-right: 20upx;
			box-sizing: border-box;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示超出部分 */
			font-weight: bold;
		}

		&-status {
			font-size: 24upx;
			color: #22b473;

			&.apply {
				width: 136upx;
				height: 41upx;
				border-radius: 20upx;
				background-color: #708aff;
				text-align: center;
				line-height: 41upx;
				color: #fff;
			}
		}

		&-brief {
			width: 100%;
			padding-left: 10upx;
			box-sizing: border-box;
			font-size: 24upx;
			color: #4d4d4d;
			line-height: 1.5;
		}

		&-bottom {
			margin-top: 10upx;
			border-top: 2upx solid #f6f6f6;
			padding-top: 20upx;
			display: flex;
			width: 100%;
			justify-content: space-between;
			font-size: 26upx;
			color: #999999;
		}


	}
</style>